<template>
  <div class="Pagination">
    <button
      class="prev"
      :class="{ disabled: page === 1 }"
      :disabled="page === 1"
      @click="setPage('-1')"
    >
      &lt; 上一页
    </button>
    <ul class="count-wrap">
      <li @click="setPage(`${1}`)" v-if="startOrEnd.start > 2">1</li>
      <li class="border-right" v-if="startOrEnd.start > 1">...</li>
      <li
        v-for="num in startOrEnd.pages"
        :class="{ active: num === page }"
        @click="setPage(`${num}`)"
      >
        {{ num }}
      </li>
      <li class="border-right" v-if="startOrEnd.end < totalPage">...</li>

      <li
        @click="setPage(`${totalPage}`)"
        v-if="startOrEnd.end < totalPage - 1"
      >
        {{ totalPage }}
      </li>
    </ul>
    <button
      class="next"
      :class="{ disabled: page === totalPage }"
      :disabled="page === totalPage"
      @click="setPage('+1')"
    >
      下一页 &gt;
    </button>
  </div>
</template>
<script lang="ts">
  export default {
    name: "Pagination",
  };
</script>
<script setup lang="ts">
  import { computed } from "vue";
  import debounce from "lodash/debounce";
  interface Props {
    page: number;
    size: number;
    total: number;
    continuous: number;
  }
  const emits = defineEmits(["changePage"]);
  const props = defineProps<Props>();
    //总页数
  const totalPage = computed(() => Math.ceil(props.total / props.size));
    //
  const startOrEnd = computed(() => {
    let start = props.page - Math.floor(props.continuous / 2);
    let end = props.page + Math.floor(props.continuous / 2);
    if (start < 1) {
      start = 1;
      end = start + props.continuous - 1;
    }
    if (end > Math.ceil(props.total / props.size)) {
      end = Math.ceil(props.total / props.size);
      start = Math.ceil(props.total / props.size) - props.continuous + 1;
      start < 1 && (start = 1);
    }
    
    let pages: number[] = [];
    for (var i = start; i <= end; i++) {
      pages.push(i);
    }
    return {
      start,
      end,
      pages,
    };
  });
  const setPage = debounce(
    (num: string) => {
      num.includes("+") && (num = props.page + 1 + "");
      num.includes("-") && (num = props.page - 1 + "");
      emits("changePage", num);
    },
    200,
    { maxWait: 5000 }
  );
</script>
<style scoped lang="less">
  .Pagination {
    padding: 20px 0;
    font-size: 12px;
    color: #555;
    height: 40px;
  }
  button {
    border: 1px solid #b0a07860;
    cursor: pointer;
    background-color: #fff;
    padding: 0 10px;
    color: #555;
    height: 100%;
    font-size: 12px;
    vertical-align: middle;
    box-sizing: border-box;
  }
  .count-wrap {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    li {
      float: left;
      padding: 0 15px;
      height: 100%;
      line-height: 40px;
      border-style: solid;
      border-width: 1px 1px 1px 0;
      box-sizing: border-box;
      border-color: #b0a07860;
      cursor: pointer;
    }
    li:last-child {
      border-right: none;
    }
  }
  .border-right {
    border: none;
    border-width: 0 1px 0 0 !important;
    line-height: 50px !important;
  }
  .active {
    color: #fff;
    background-color: #b0a078;
  }
  .disabled {
    cursor: no-drop;
    opacity: 0.6;
  }
</style>
